<template>
  <div>
    <a-tree show-line ref="nodeTree" :tree-data="nodeData" :selectedKeys="selectedKeys" :replace-fields="replaceFields"
      default-expand-all show-icon @select="onSelect">
      <!--   新增、修改、删除图标   -->
      <template slot="plus" slot-scope="record">
        <a-icon type="plus" class="plusType" style="padding-left: 10px" @click.stop="nodeHandle(record, true)"></a-icon>
        <a-icon type="edit" class="editType" style="padding-left: 10px" @click.stop="nodeHandle(record, false)"></a-icon>
        <a-popconfirm :title="$t('user.verification-code.required111566110577223')" :ok-text="$t('menu.exception.trigger')" :cancel-text="$t('user.email.required11')" @confirm="confirm" @cancel="cancel">
          <a-icon type="delete" class="deleteType" style="padding-left: 10px" @click.stop="nodeDel(record)"></a-icon>
        </a-popconfirm>
      </template>
      <!--   修改、删除图标   -->
      <template slot="edit" slot-scope="record">
        <a-icon type="edit" class="editType" style="padding-left: 10px" @click.stop="nodeHandle(record, false)"></a-icon>
        <a-popconfirm :title="$t('user.verification-code.required111566110577223')" :ok-text="$t('menu.exception.trigger')" :cancel-text="$t('user.email.required11')" @confirm="confirm" @cancel="cancel">
          <a-icon type="delete" class="deleteType" style="padding-left: 10px" @click.stop="nodeDel(record)"></a-icon>
        </a-popconfirm>
      </template>
    </a-tree>
    <a-drawer title="添加/编辑 分类" placement="right" :closable="false" :visible="addVisibleDrawer"
      :after-visible-change="afterVisibleChange" :width="500" @close="onClose">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" labelAlign="right">
        <a-form-item label="分类名称：">
          <a-input placeholder="请输入分类名称"></a-input>
        </a-form-item>
        <a-form-item label="上一级分类：">个人信息->客户信息->身份信息</a-form-item>
      </a-form>
      <div :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'center',
        zIndex: 1,
      }">
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onClose">确定</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
// import {
//   DelLimsConfigNodeData,
//   GetLimsConfigNodeData,
// } from '@/services/LIMSApis/nodeConfig'
// 数组对象中查找符合目标的对象
const parseArray = function (objArray, key, value) {
  for (let i in objArray) {
    let element = objArray[i]
    if (typeof element === 'object') {
      let result = parseArray(element, key, value)
      if (result) return result
    } else {
      if (i === key) {
        if (element === value) return objArray
      }
    }
  }
}


// const nodeData = [{
//   // codeLine: '0-0',
//   key: '1',
//   id: '1',
//   name: '个人信息',
//   children: [
//     {
//       // codeLine: '0-0-0',
//       key: '2',
//       id: '2',
//       name: '客户信息',
//       children: [
//         {
//           // codeLine: '0-0-0-0',
//           key: '6',
//           id: '6',
//           name: '身份信息',
//           children: [
//             {
//               // codeLine: '0-0-0-0-0',
//               key: '10',
//               id: '10',
//               name: '联系方式'
//             },
//             {
//               // codeLine: '0-0-0-0-1',
//               key: '11',
//               id: '11',
//               name: '合同信息'
//             },
//             {
//               codeLine: '0-0-0-0-2',
//               key: '12',
//               id: '12',
//               name: '网络身份标识信息'
//             },
//             {
//               codeLine: '0-0-0-0-3',
//               key: '13',
//               id: '13',
//               name: '身份证件信息'
//             },
//           ]
//         },
//         {
//           codeLine: '0-0-0-1',
//           key: '7',
//           id: '7',
//           name: '行为数据'
//         },
//         {
//           codeLine: '0-0-0-2',
//           key: '8',
//           id: '8',
//           name: '社会人口统计学数据'
//         },
//         {
//           codeLine: '0-0-0-3',
//           key: '9',
//           id: '9',
//           name: '个性数据'
//         },
//       ]
//     },
//     {
//       codeLine: '0-0-1',
//       key: '3',
//       id: '3',
//       name: '员工信息'
//     },
//     {
//       codeLine: '0-0-2',
//       key: '4',
//       id: '4',
//       name: '投资人信息'
//     },
//     {
//       codeLine: '0-0-3',
//       key: '5',
//       id: '5',
//       name: '供应商信息'
//     },
//   ]
// }]

import { sourceTree } from '@/api/dcc'

export default {
  props: {
    isDetails: false,
  },
  data() {
    return {
      replaceFields: {
        title: 'name',
        key: 'id',
      },
      nodeData: [],
      codeLine: '',
      selectedKeys: null,
      filterResource: null,
      addVisibleDrawer: false,
    }
  },
  mounted() {
    this.initTree();
    // this.GetLimsConfigNode()
  },

  methods: {
    async initTree() {
      const { data } = await sourceTree()
      this.nodeData = data
    },
    // 获取全部节点树
    // async GetLimsConfigNode() {
    //   this.nodeData = await GetLimsConfigNodeData()
    // },
    // 新增、修改节点操作，此处为打开新增修改界面，调用实际后端接口进行节点的处理操作
    async nodeHandle(record, isAdd) {
      this.addVisibleDrawer = true

      // this.visible = true
      // this.$nextTick(() => {
      //   this.$refs.addOrUpdate.init(record, isAdd, this.nodeData)
      // })
    },
    nodeDel(record) {
      // this.$confirm({
      // title: `您确定要删除该节点：${record.name}?`,
      // okText: '删除',
      // cancelText: '取消',
      // onOk: async () => {
      //   await DelLimsConfigNodeData({ id: record.id })
      //   this.$message.success('删除成功')
      //   // 刷新当前节点
      //   await this.GetLimsConfigNode()
      //   this.selectedKeys = null
      //   this.codeLine = ''
      // },
      // })
    },

    // 选中
    async onSelect(params, e) {
      if (this.filterResource) {
        this.$set(this.filterResource, 'scopedSlots', {})
      }
      console.log(this.selectedKeys)
      // console.log(params, e)
      // this.filterResource = parseArray(this.nodeData, 'id', params[0])
      // this.$set(this.filterResource, 'scopedSlots', { icon: "plus" })
      // console.log(e.selected)

      if (e.selected) {
        const indexs = params[0].split('-')
        if (indexs.length > 5)
          console.log(11111)
        console.log(params[0])
        let codeLine = params[0]
        let arr = codeLine.split('-')
        this.filterResource = parseArray(this.nodeData, 'id', params[0])
        console.log(this.filterResource)
        if (this.isDetails) return
        let iconStr
        if (arr.length < 5) {
          iconStr = 'plus'
        } else {
          iconStr = 'edit'
        }
        this.$set(this.filterResource, 'scopedSlots', { icon: iconStr })
        this.selectedKeys = params
        this.codeLine = codeLine
      } else {
        this.selectedKeys = null
        this.codeLine = ''
      }
    },

    // onExpand(expandedKeys) {
    //   console.log('onExpand', expandedKeys);
    //   // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    //   // or, you can remove all expanded children keys.
    //   this.expandedKeys = expandedKeys;
    //   this.autoExpandParent = false;
    // },
    // onCheck(checkedKeys) {
    //   console.log('onCheck', checkedKeys);
    //   this.checkedKeys = checkedKeys;
    // },
    // onSelect(selectedKeys, info) {
    //   console.log('onSelect', info);
    //   this.selectedKeys = selectedKeys;
    // },

    afterVisibleChange(val) {
      console.log('visible', val);
    },
    onClose() {
      this.addVisibleDrawer = false;
    },

    confirm(e) {
      console.log(e);
      this.$message.success('删除成功');
    },
    cancel(e) {
      console.log(e);
      this.$message.warning('取消删除');
    },
  },
}
</script>

<style lang="less" scoped>
.wrap {
  position: relative;
  width: 350px;
  background: #fff;
}

/deep/ .ant-tree-node-content-wrapper {
  position: relative;
}

/deep/.ant-tree li span.ant-tree-iconEle {
  width: 14px;
  height: 14px;
  position: absolute;
  right: -30px;

  .plusType,
  .editType,
  .deleteType {
    &:hover {
      color: @primary-color;
    }
  }
}

/deep/.ant-tree-node-content-wrapper {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/deep/ .ant-tree li {
  padding: 10px 0 0;
}

/deep/ .ant-tree li ul {
  padding: 10px 0 10px 30px;
}

/deep/ .ant-tree li .ant-tree-node-content-wrapper {
  // background: #DDD;
  display: inline;
  padding: 10px 10px;
  line-height: 30px;
  margin: 10px 0;
  border-radius: 4px;
}

/deep/.ant-tree>li>span:nth-child(3) {
  color: #FFF;
}

/deep/ .ant-tree>li>ul>li>ul>li>ul>li>ul>li>span {
  background: transparent !important;
  padding: 10px 0 !important;
}
</style>

